<!DOCTYPE html>
<html>
<body>
<video id="video" muted="muted" loop></video>
<script src="resources/canvas_runner.js"></script>
<script>
var videoElement = document.getElementById("video");
var destCanvas2D = document.createElement("canvas");
var destCtx2D = destCanvas2D.getContext("2d");
var dummyCanvas2D = document.createElement("canvas");
var dummyCtx2D = dummyCanvas2D.getContext("2d");
document.body.appendChild(destCanvas2D);

function setSize(width, height) {
    destCanvas2D.width = width;
    destCanvas2D.height = height;
    dummyCanvas2D.width = width;
    dummyCanvas2D.height = height;
}

function startPerfTest() {
    for (i = 0; i < 10; i++) {
        doRun();
    }
    ensureComplete();
    requestAnimationFrame(startPerfTest);
}

function doRun() {
    // draw Video
    destCtx2D.drawImage(videoElement, 0, 0);
}

function ensureComplete() {
    // Using destCanvas2D as a source image is just to flush out the content when
    // accelerated 2D canvas is in use.
    // dummyCtx2D must also be accelerated to prevent destCanvas2D from becoming
    // non-accelerated due to the DisableAccelerationToAvoidReadbacks heuristic.
    dummyCtx2D.drawImage(destCanvas2D, 0, 0, 1, 1, 0, 0, 1, 1);
}

window.onload = function () {
    // It should use setMinimumAccelerated2dCanvasSize() to enable accelerated Canvas for a specified size
    // but this API is not available in JS or WebPage. Assume the threshold size is 256x257
    // and the dest canvas is HW accelerated Canvas when setting its size to 1024x1024.
    setSize(1024, 1024);

    videoElement.src = "resources/crowd1080.webm";
    if(!videoElement.canPlayType('video/webm').replace(/no/, '')) {
        console.logFatalError("video/webm is unsupported");
        throw 'video/webm is unsupported';
    };
    CanvasRunner.startPlayingAndWaitForVideo(videoElement, startPerfTest);
}

</script>
</body>
</html>
